<script setup lang="ts">
import type { TimePickerProps } from './type.d'
// ------------------use------------------
// #region
defineProps<TimePickerProps>()
const time = defineModel<string>({
  default: () => '',
})
// #endregion
// ------------------静态变量------------------
// #region

// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region

// #endregion
// ------------------reactive------
// #region

// #endregion
// ------------------computed------
// #region

// #endregion
// ------------------生命周期------------------
// #region

// #endregion
// ------------------内置方法---------------------
// #region

// #endregion
// ------------------方法---------------------
// #region

// #endregion
</script>

<template>
  <el-popover
    ref="popover"
    :width="180"
    trigger="focus"
    popper-class="reset"
  >
    <template #reference>
      <!-- <el-input
        v-model="time"
        :placeholder="placeholder"
        style="width: 200px"
        :prefix-icon="Clock"
        clearable
      /> -->
      <ElButton>131</ElButton>
    </template>
    <div class="time-picker">
      <div class="align-center time-picker__content flex">
        <el-scrollbar
          v-for="p in [24, 60]"
          :key="p"
          class="flex-sub"
        >
          <ul class="margin-0 padding-0 text-center">
            <li v-for="i in p" :key="i">
              {{ (i - 1).toString().padStart(2, '0') }}
            </li>
          </ul>
        </el-scrollbar>
      </div>
      <div class="time-picker__footer box-border">
        <button class="cancel">
          取消
        </button>
        <button class="confirm text-bold">
          确定
        </button>
      </div>
    </div>
  </el-popover>
</template>

<style lang="scss" scoped>
//------------------组件样式------------------
.time-picker {
  --time-picker-content: 190px;
  --time-picker-footer: 36px;
  --time-picker-item-height: 32px;
  &__content {
    position: relative;
    height: var(--time-picker-content);
    ul {
      position: relative;
      list-style: none;
    }
    ul::before,
    ul::after {
      content: '';
      display: block;
      width: 100%;
      height: 80px;
    }
    li {
      cursor: pointer;
      height: var(--time-picker-item-height);
      line-height: var(--time-picker-item-height);
      font-size: 12px;
      color: var(--el-text-color-regular);
    }
    li:hover {
      background-color: var(--el-fill-color-light);
    }
  }
  &__content::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9;
    content: '';
    width: 70%;
    height: var(--time-picker-item-height);
    border-top: 1px solid var(--el-border-color);
    border-bottom: 1px solid var(--el-border-color);
  }
  &__footer {
    border-top: 1px solid var(--el-border-color-light);
    height: var(--time-picker-footer);
    line-height: calc(var(--time-picker-footer) - 11px);
    text-align: right;
    padding: 4px;
    button {
      padding: 0 5px;
      margin: 0 5px;
      background: none;
      border: none;
      cursor: pointer;
      font-size: 12px;
      outline: none;
    }
    button.cancel {
      color: var(--el-text-color-primary);
    }
    button.confirm {
      color: var(--el-color-primary);
    }
  }
}
//-------------样式穿透-------------
</style>
